<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!-- 引入样式 -->
<link rel="stylesheet" href="${base}/plugin/element/index.css">
<script src="${base}/plugin/vue/vue.js"></script>
<script src="${base}/plugin/element/index.js"></script>
<script src="${base}/js/axios.min.js"></script>
<script src="${base}/js/jquery-1.7.js"></script>

<title>凯卫导航</title>
</head>



<body>

  <div id="header">
	
	<el-container>
		  <el-header>
		  
		  	    <el-col :span="4">
				    <el-image
				      style="width: 180px; height: 70px" 
				      :src="logoUrl"></el-image>
		  	    </el-col>
			
			    <el-col :span="18">
					<el-menu :span="10"
					  :default-active="activeIndex"
					  class="el-menu-demo"
					  mode="horizontal"
					  @select="handleSelect">
					  	<el-menu-item index="${base}/guide/outer/index">公开导航   </el-menu-item>
					    <el-menu-item index="${base}/guide/inner/index">私人导航   </el-menu-item>
					  </el-submenu>
					</el-menu>		

				</el-col>
				
			  	<el-col :span="2">
				    <el-link>登录</el-link> |  <el-link>注册</el-link>
		  	    </el-col>			
				

		  </el-header>
		  
		  <el-main>
		
			<div id="content">
			    <iframe id="contentIframe" src="${base}/guide/outer/index" frameborder="0"
		            style="width:100%; height:calc(100vh - 112px); box-shadow: 0px 0px 4px #d9e2f3;"></iframe>    
			</div>
		
		  </el-main>
		  
		  <el-footer>  
		  	<el-link href='http://www.beian.miit.gov.cn'>豫ICP备20017765号</el-link>  
		  </el-footer>
	</el-container>
	

	    
  </div>
	


<script>
	var head = new Vue({
	    el: '#header',
	    data: {
	       activeIndex: '${base}/guide/outer/index',
	       data: '',
	       logoUrl:'${base}/img/logo/xiaoguoguide_web.png',
	       qqLoginUrl:'${base}/img/logo/qq_logo_76X24.png'
	    },
	    methods: {
	          handleSelect(key, keyPath) {
	              $("#contentIframe").attr("src", keyPath);
	          }
	    }
	    
	  });
	
	
	$(window).load(function () {
		var userInfo = '${session_user!}';
		if(userInfo.length>0){
			head.activeIndex = '${base}' + "/guide/inner/index";
		}else{
			head.activeIndex = '${base}' + "/guide/outer/index";
		}
		$("#contentIframe").attr("src", head.activeIndex);
    })
</script>
</body>
</html>